<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <!-- <a-col :span="24">
            <a-form-model-item label="账户id (openId)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountId">
              <a-input v-model="model.accountId" placeholder="请输入账户id (openId)"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col v-if="this.eidtType == 'update'" :span="24">
            <a-form-model-item :label="$t('columns.accountCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountCode">
              <a-input readonly v-model="model.accountCode" :placeholder="$t('common.form.rule.input',{label: $t('columns.accountCode')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.accountName')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountName">
              <a-input v-model="model.accountName" :placeholder="$t('common.form.rule.input',{label: $t('columns.accountName')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="车辆类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carTypeName">
              <a-input v-model="model.carTypeName" placeholder="请输入车辆类型"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="微信名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountName">
              <a-input v-model="model.accountName" placeholder="请输入微信名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nickName">
              <a-input v-model="model.nickName" placeholder="请输入昵称"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.phone')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" :placeholder="$t('common.form.rule.input',{label:$t('columns.phone')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.email')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <a-input v-model="model.email" :placeholder="$t('common.form.rule.input',{label:$t('columns.email')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="账户余额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountBalance">
              <a-input-number v-model="model.accountBalance" placeholder="请输入账户余额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="image">
              <a-input v-model="model.image" placeholder="请输入头像"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="创建账号的网点id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meshPointId">
              <a-input v-model="model.meshPointId" placeholder="请输入创建账号的网点id"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="身份证名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identityName">
              <a-input v-model="model.identityName" placeholder="请输入身份证名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份证号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identityNumber">
              <a-input v-model="model.identityNumber" placeholder="请输入身份证号码"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="身份证正面url" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identityPositive">
              <a-input v-model="model.identityPositive" placeholder="请输入身份证正面url"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份证反面url" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="identityReverse">
              <a-input v-model="model.identityReverse" placeholder="请输入身份证反面url"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="实人认证状态（1：未认证，2：认证通过，3：认证未通过）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reviewStatus">
              <a-input-number v-model="model.reviewStatus" placeholder="请输入实人认证状态（1：未认证，2：认证通过，3：认证未通过）" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审核时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reviewTime">
              <j-date placeholder="请选择审核时间"  v-model="model.reviewTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="押金" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountDeposit">
              <a-input-number v-model="model.accountDeposit" placeholder="请输入押金" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="押金状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="depositType">
              <a-input-number v-model="model.depositType" placeholder="请输入押金状态" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item :label="$t('columns.carId')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carId">
              <a-input v-model="model.carId" :placeholder="$t('common.form.rule.input',{label:$t('columns.carId')})"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="租车押金状态（1：未支付押金，2：已支付押金，3：押金退款中）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rentalDepositType">
              <a-input v-model="model.rentalDepositType" placeholder="请输入租车押金状态（1：未支付押金，2：已支付押金，3：押金退款中）"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="还车状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="revertStatus">
              <a-input v-model="model.revertStatus" placeholder="请输入还车状态"  ></a-input>
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<i18n>
  {
    "zh-CN": {
      "columns": {
        "accountCode": "账户编号",
        "accountName": "账户名称",
        "phone": "手机号",
        "email": "邮箱",
        "carId": "车辆编号"
      }
    },
    "en-US": {
      "columns": {
        "accountCode": "Account Number",
        "accountName": "Account Name",
        "phone": "Phone Number",
        "email": "Email",
        "carId": "EBike Number"
      }
    },
    "fr-FR": {
      "columns": {
        "accountCode": "Numéro de compte",
        "accountName": "Nom du compte",
        "phone": "Numéro de téléphone portable",
        "email": "Boîte aux lettres",
        "carId": "Numéro du véhicule"
      }
    }
  }
</i18n>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'RentalPayAccountForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        eidtType: 'add',
        url: {
          add: "/rental/account/add",
          edit: "/rental/account/edit",
          queryById: "/rental/account/queryById",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
        this.eidtType = 'add';
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.eidtType = 'update';
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.accountId){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>